<template>
    <div class="rank" ref="rankWrapper">      
        <scroller class="scroller" ref="scroll">
            <ul class="rank-list" v-if="rankList.length">
                <li class="item-rank" v-for="(item) in rankList" :key="item.name" @click="_getRankByType(item)">
                    <div class="rank-cover">
                        <img v-lazy="item.coverImgUrl" width="100%" alt="">
                    </div>
                    <div class="rank-info">
                        <p class="rank-name">{{item.name}}</p>
                        <p class="description">{{item.description}}</p>
                    </div>
                </li>
            </ul>
        </scroller>
        <loading v-if="!rankList.length"></loading>
        <transition name="van-slide-right">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import { getRank } from 'api/api'
import setIndex from 'common/js/rankIdx'
import Loading from 'components/loading/loading'
import { playerMixin } from 'common/js/mixin'
export default {
    name:'',
    mixins: [playerMixin],
    data(){
        return {
            rankList: [],
            loading:false
        }
    },
    mounted(){
        this._getRank()
    },
    methods:{
        _getRank(){
            getRank().then(res=> {              
                this.rankList = res.list
                this.setRankIndex()
            })
        },
        setRankIndex(){
            this.rankList.forEach(item=> {
                item = setIndex(item)
            })
        },
        _getRankByType(item){
            this.$router.push({path:'/rank/rank-detail',query:{
                idx:item.idx,
                cover: item.coverImgUrl,
                name: item.name
            }})
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.rankWrapper.style.bottom = `60px`             
            }else{
                this.$refs.rankWrapper.style.bottom = `0px`
            }
            this.$refs.scroll.resize()
        }
    },
    components: {
        Loading
    }
}
</script>

<style scoped lang="less"> 
    .rank{
        position: fixed;
        top: 76px;
        bottom: 0;
        width: 100%;
        background:#f7f7f7;
        .scroller{
            padding:0 20px;
            box-sizing: border-box;
            .rank-list{
                padding: 10px 0; 
                .item-rank{
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding-right: 10px;
                    background: #fff;
                    &:last-of-type{
                        margin-bottom: 0px;
                    }
                    .rank-cover{
                        overflow: hidden;
                        width:90px;
                        height: 90px;
                    }
                    .rank-info{
                        flex: 1;
                        font-size: 18px;
                        margin-left: 15px;
                        .rank-name{
                            margin-bottom: 10px;
                        }
                        .description{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            font-size: 12px;
                            color: #888;
                            line-height: 20px;
                        }
                    }
                }
            }   

        }
    }
</style>
